<template>
  <div>
    <!-- 表格显示 -->
    <el-table border style="width: 100%" :data="departInfos">
      <!-- prop 代表 tableData 里面的对象 -->
      <el-table-column prop="id" label="序号"> </el-table-column>
      <el-table-column prop="name" label="部门名"> </el-table-column>
      <el-table-column prop="tel" label="部门电话"> </el-table-column>
      <el-table-column prop="" label="信息操作">
        <template slot-scope="scope">
          <el-button
            @click="setEditId(scope), (dialogFormVisible = true)"
            type="primary"
            icon="el-icon-edit"
            circle
            style="margin-right: 10px"
          ></el-button>
          <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="部门名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门电话" :label-width="formLabelWidth">
                <el-input
                  type="tel"
                  v-model="form.tel"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="primary"
                @click="editHandler(), (dialogFormVisible = false)"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <el-button
            @click="deleteHandler(scope)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 展示分页 -->
    <el-pagination
      background
      @current-change="handleCurrentChange"
      :page-size="3"
      layout="prev, pager, next"
      :total="counter"
    >
    </el-pagination>
  </div>
</template>

<script>
/* 调用部门接口 */
import {
  getDepartListCounter,
  getDepartList,
  deleteDepart,
  updateDepartMsg,
} from "../api/depart.js";
import { validDepartTel, validDepartName } from "../util/validate.js";
export default {
  name: "Admin-depart-list",
  async created() {
    this.counter = (await getDepartListCounter()).data.length;
    // console.log("总条数：", this.counter);
    this.getDeparts();
  },
  methods: {
    async getDeparts() {
      // 这个里面调用接口
      const infos = await getDepartList({ page: 1, limit: 3 });
      // console.log("infos", infos);
      this.departInfos = infos.data;
    },
    async handleCurrentChange(page) {
      // console.log("handleCurrentChange", page);
      this.page = page;
      const infos = await getDepartList({ page, limit: 3 });
      this.departInfos = infos.data;
    },
    setEditId(scope) {
      this.editId = scope.row.id;
    },
    async editHandler() {
      // console.log("edit-scope", this.editId);
      /* 验证部门名是否重复 */
      if (this.form.name) {
        if (!(await validDepartName(this.form.name))) {
          swal("部门名重复!", "请重新填写部门名!", "error");
          return;
        }
      }

      /* 验证手机格式是否正确 */
      if (this.form.tel) {
        if (!validDepartTel(this.form.tel)) {
          swal("部门号码不正确!", "请填写正确的座机号码!", "error");
          return;
        }
      }

      /* 更新数据 */
      await updateDepartMsg(this.editId, this.form.name, this.form.tel);
      console.log(1234567);
      const infos = await getDepartList({ page: this.page, limit: 3 });
      this.departInfos = infos.data;
    },
    async deleteHandler(scope) {
      // console.log("delete-scope", scope.row.id);
      await deleteDepart(scope.row.id);
      const infos = await getDepartList({ page: this.page, limit: 3 });
      this.departInfos = infos.data;
    },
  },
  data() {
    return {
      counter: 0,
      page: 1,
      departInfos: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        tel: "",
      },
      formLabelWidth: "120px",
      editId: 0,
    };
  },
};
</script>

<style scoped lang="less">
.el-radio--medium.is-bordered {
  margin: 10px;
}
.el-input {
  margin: 0 10px;
  width: 260px;
}
.el-tag--plain {
  margin-right: 10px;
}
</style>